<script lang="tsx">
  import { defineComponent, ref, h, compile, computed, watchEffect } from 'vue';
  import { useRoute, useRouter, RouteRecordRaw } from 'vue-router';
  import type { RouteMeta } from 'vue-router';
  import { useAppStore } from '@/store';
  import { listenerRouteChange } from '@/utils/route-listener';
  import { openWindow, regexUrl } from '@/utils';
  import useMenuTree from './use-menu-tree';

  export default defineComponent({
    emit: ['collapse'],
    setup() {
      // const { t } = useI18n();
      const appStore = useAppStore();
      const router = useRouter();
      const route = useRoute();
      const { menuTree } = useMenuTree();
      const collapsed = computed({
        get() {
          if (appStore.device === 'desktop') return appStore.menuCollapse;
          return false;
        },
        set(value: boolean) {
          appStore.updateSettings({ menuCollapse: value });
        },
      });

      const openKeys = ref<string[]>([]);
      const selectedKey = ref<string[]>([]);

      watchEffect(() => {
        selectedKey.value = [route.name as string];
      });

      const goto = (item: RouteRecordRaw) => {
        // Open external link
        // if (regexUrl.test(item.path)) {
        //   openWindow(item.path);
        //   selectedKey.value = [item.name as string];
        //   return;
        // }
        // Eliminate external link side effects
        // const { hideInMenu, activeMenu } = item.meta as RouteMeta;
        // if (route.name === item.name && !hideInMenu) {
        selectedKey.value = [item.name as string];
        //   return;
        // }
        // Trigger router change
        if (item.name === 'ProductionDoWork') {
          let currentDomain =
            window.location.protocol +
            '//' +
            window.location.hostname +
            ':' +
            window.location.port;

          // 构建新的 URL，保持域名相同但路径不同
          let newPath = '/production/ProductionOperation/ProductionDoWork'; // 新的路径
          let newURL = currentDomain + newPath;
          let newWindow = window.open(newURL);
        } else {
          router.push({
            name: item.name,
          });
        }
      };

      const findMenuOpenKeys = (name: string) => {
        const result: string[] = [];
        let isFind = false;
        const backtrack = (
          item: RouteRecordRaw,
          keys: string[],
          target: string
        ) => {
          if (item.name === target) {
            isFind = true;
            result.push(...keys, item.name as string);
            return;
          }
          if (item.children?.length) {
            item.children.forEach((el) => {
              backtrack(el, [...keys], target);
            });
          }
        };
        menuTree.value.forEach((el: RouteRecordRaw) => {
          if (isFind) return; // Performance optimization
          backtrack(el, [el.name as string], name);
        });
        return result;
      };
      listenerRouteChange((newRoute) => {
        const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta;
        if (requiresAuth && (!hideInMenu || activeMenu)) {
          const menuOpenKeys = findMenuOpenKeys(
            (activeMenu || newRoute.name) as string
          );
          const keySet = new Set([...menuOpenKeys, ...openKeys.value]);
          openKeys.value = [...keySet];
          selectedKey.value = [
            activeMenu || menuOpenKeys[menuOpenKeys.length - 1],
          ];
        }
      }, true);
      const setCollapse = (val: boolean) => {
        if (appStore.device === 'desktop')
          appStore.updateSettings({ menuCollapse: val });
      };

      const renderSubMenu = () => {
        function travel(_route: RouteRecordRaw[], nodes = []) {
          if (_route) {
            _route.forEach((element) => {
              let node;
              // This is demo, modify nodes as needed
              if (element.meta?.hideInMenu !== true) {
                const icon = element?.meta?.icon
                  ? () =>
                      h(
                        compile(
                          `<i class="iconfont ${element?.meta?.icon}"></i>`
                        )
                      )
                  : null;
                node =
                  element?.children && element?.children.length !== 0 ? (
                    <a-sub-menu
                      key={element?.name}
                      v-slots={{
                        icon,
                        title: () => h(compile(element?.meta?.locale || '')),
                      }}
                    >
                      {travel(element?.children)}
                    </a-sub-menu>
                  ) : (
                    <a-menu-item
                      key={element?.name}
                      v-slots={{ icon }}
                      onClick={() => goto(element)}
                    >
                      {element?.meta?.locale || ''}
                    </a-menu-item>
                  );
                nodes.push(node as never);
              }
            });
          }
          return nodes;
        }
        return travel(menuTree.value);
      };

      const MenuClick = (key: any) => {
        // if (sessionStorage.getItem('currMenus')) {
        //   let currMenusKey = JSON.parse(
        //     sessionStorage.getItem('currMenus') as any
        //   ).meta.key;
        //   sessionStorage.setItem('currMenusKey', currMenusKey);
        // }
      };

      return () => (
        <a-menu
          v-model:collapsed={collapsed.value}
          v-model:open-keys={openKeys.value}
          show-collapse-button={appStore.device !== 'mobile'}
          auto-open={false}
          selected-keys={selectedKey.value}
          auto-open-selected={true}
          level-indent={34}
          style="height: 100%;"
          onCollapse={setCollapse}
          onMenuItemClick={MenuClick}
        >
          {renderSubMenu()}
        </a-menu>
      );
    },
  });
</script>

<style lang="less" scoped>
  :deep(.arco-menu-inner) {
    background-color: rgb(61, 126, 255) !important;
    color: #f9fafc !important;
    .iconfont {
      color: #f9fafc !important;
    }

    .arco-menu-inline-header {
      display: flex !important;
      align-items: center !important;
    }

    :deep(arco-icon) {
      &:not(.arco-icon-down) {
        font-size: 18px;
        color: #f9fafc !important;
      }
    }
  }
  :deep(.arco-menu-selected),
  :deep(.arco-menu-item:hover),
  :deep(.arco-menu-inline-header.arco-menu-selected.arco-menu-has-icon:hover),
  :deep(.arco-menu-item.arco-menu-selected.arco-menu-has-icon),
  :deep(.arco-menu-pop.arco-menu-pop-header.arco-menu-has-icon:hover),
  :deep(.arco-menu-inline-header:hover) {
    background-color: rgb(49, 101, 204) !important;
    color: #f9fafc !important;
  }
  :deep(.arco-menu-pop.arco-menu-pop-header.arco-menu-has-icon),
  :deep(.arco-menu-item),
  :deep(.arco-menu-inline-header) {
    background-color: rgb(61, 126, 255) !important;
    color: #f9fafc !important;
  }

  :deep(.arco-menu-inline-header) {
    background-color: rgb(61, 126, 255) !important;
    color: #f9fafc !important;
  }

  :deep(.arco-menu-inline-content) {
    .arco-menu-selected {
      border-radius: 100px 0px 0px 100px !important;
      background-image: linear-gradient(
        to right,
        rgb(28, 51, 95),
        rgba(56, 122, 227, 1)
      );
      font-family: 'Arial Normal', 'Arial' !important;
      color: rgb(255, 255, 255) !important;
    }
  }
  :deep(.arco-menu-inner) {
    .arco-menu-selected {
      border-radius: 100px 0px 0px 100px !important;
      background-image: linear-gradient(
        to right,
        rgb(28, 51, 95),
        rgba(56, 122, 227, 1)
      ) !important;
      font-family: 'Arial Normal', 'Arial' !important;
      color: rgb(255, 255, 255) !important;
    }
  }

  :deep(.arco-menu-inline-header .arco-menu-selected .arco-menu-has-icon),
  :deep(.arco-menu-title) {
    color: rgb(255, 255, 255) !important;
  }

  :deep(.arco-menu-light),
  :deep(.arco-menu-inline-header),
  :deep(.arco-menu-selected:hover) {
    background-color: rgb(61, 126, 255) !important;
    color: #f9fafc !important;
  }

  // :deep(arco-icon),
  // :deep(arco-icon-down) {
  //   color: blue;
  // }
</style>
